<template>
  <view v-for="news in props.list" class="mb-3 bb" :key="news.id" @click="handleClick(news)">
    <view class="flex overflow-hidden pb-2 ">
      <image :src="parseImage(news)" :alt="news.title" class="rounded-lg w-28 h-20 object-cover" />
      <view class="flex-1 px-2 flex flex-col">
        <view class="font-medium text-gray-800 line-clamp-2 mb-2">{{ news.newsTitle }}</view>
        <view
          class="text-xs text-gray-800 line-clamp-2 mb-2 h-8 line-clamp-1 overflow-hidden"
          v-html="news.newsContent"
        />
      </view>
    </view>
  </view>

  <!-- <ArticleModal
    ref="articleModal"
    :article="activeArticle"
    :visible="visible"
    @close="handleClose"
  /> -->
</template>

<script setup>
// import ArticleModal from '@/components/ArticleModal.vue'

const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
})

const visible = ref(false)

const activeArticle = ref(null)

const handleClick = (news) => {
  uni.navigateTo({
    url: `/pages/article/index?id=${news.id}`,
  })

  // activeArticle.value = news
  // visible.value = true
}

const parseImage = (news) => {
  if (news.newsImage) {
    let arr = news.newsImage.split(',')
    if (arr.length > 0) {
      return arr[0]
    } else {
      return 'http://llcdn.jxsr.com/placeholder.png'
    }
  } else {
    return 'http://llcdn.jxsr.com/placeholder.png'
  }
}

const handleClose = () => {
  visible.value = false
  activeArticle.value = null
}
</script>

<style lang="scss" scoped>
.bb {
  border-bottom: 1rpx solid #eee;
}

.bb:last-child{
	border: none;
}
</style>
